<template>
  <div class="navbar">
    <div>
      <el-tag v-for="(tag, index) in routeHistory"
              :key="tag"
              class="mx-1 mb10"
              :closable="index !== 0"
              :type="currentRouteName === tag.name ? '' : 'info'"
              @close="removeTag(tag, index)"
              @click="navigateTo(tag)">
        {{ tag.name }}
      </el-tag>
    </div>
  </div>
</template>

<script>
import { computed, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";

export default {
  name: "HeaderA",
  setup () {
    const route = useRoute();
    console.log(route, 'route');
    const router = useRouter();
    const currentRouteName = computed(() => route.name);
    const routeHistory = ref([{ name: "首页" }]);
    watch(
      () => route.name,
      (newRoute) => {
        let routeNamemap = routeHistory.value.map(a => a.name)
        if (newRoute && !routeNamemap.includes(newRoute)) {
          routeHistory.value.push({ name: newRoute, query: route.query });
        }
      }
    );
    const removeTag = (tag, index) => {
      if (index !== 0) {
        const idx = routeHistory.value.indexOf(tag);
        if (idx !== -1) {
          routeHistory.value.splice(idx, 1);
        }
      }
    };
    const navigateTo = (routeName) => {
      router.push({ name: routeName.name, query: routeName.query });
    };
    return { currentRouteName, routeHistory, removeTag, navigateTo };
  },
};
</script>

<style>
.navbar {
  padding: 10px 10px;
  border-bottom: 1px solid #f3f3f3; /* 浅灰色下边框 */
  display: flex; /* 使用弹性布局 */
  align-items: center; /* 垂直居中 */
}

.el-breadcrumb,
.el-tag {
  margin-right: 10px; /* 右侧间距 */
}

.el-tag {
  cursor: pointer; /* 鼠标悬停时显示指针 */
  transition: all 0.3s ease; /* 平滑过渡效果 */
}

.el-tag:hover {
  opacity: 0.8; /* 鼠标悬停时透明度变化 */
}

.mx-1 {
  margin-left: 10px;
  margin-right: 10px;
}
/* 隐藏所有标签的关闭按钮 */
.el-tag .el-tag__close {
  display: none;
}

/* 鼠标悬停时，显示非第一个标签的关闭按钮 */
.el-tag:hover .el-tag__close {
  display: inline-block;
}

/* 第一个标签的关闭按钮始终不显示 */
.el-tag:first-child .el-tag__close {
  display: none !important;
}
</style>
